{% extends 'IcsocUIBundle:Form:fields.html.twig' %}

{% block choice_widget -%}
    {% if sound_list is defined %}
        <div class="{% if attr.divClass is defined %}{{ attr.divClass }}{% else %}col-sm-9{% endif %}">
            {{- block('choice_widget_collapsed') -}}
            <select id="{{ id }}_list">
                <option value="">{{ 'Please Select Sound'|trans }}</option>
                {% for sound in sound_list %}
                    <option value="{{ sound.address }}">
                        {{ sound.name|trans({}, translation_domain) }}
                    </option>
                {% endfor %}
            </select>
            <button id="{{ id }}_refresh" class="btn btn-info btn-xs" type="button" title="{{ 'Refresh sound list'|trans }}">
                <i class="ace-icon fa fa-refresh"></i>
            </button>
            <input class="hidden" type="text" id="{{ id }}_number" value="">
            <button id="{{ id }}_add" class="btn btn-info btn-xs" type="button" title="{{ 'Refresh sound list'|trans }}">
                <i class="ace-icon fa fa-plus"></i>
            </button>
            <br>
            <audio id="{{ id }}_player" style="margin-top: 8px;color: white" autoplay="autoplay" controls="controls">
                {{ 'Your browser does not support this player!'|trans }}
            </audio>
            <script type="application/javascript">
                $('#{{ id }}').on('change', function() {
                    var value = $(this).val();
                    switch (value) {
                        case '1'://语音列表
                            $('#{{ id }}'+'_list').removeClass('hidden');
                            $('#{{ id }}'+'_player').removeClass('hidden');
                            $('#{{ id }}'+'_refresh').removeClass('hidden');
                            $('#{{ id }}'+'_number').addClass('hidden');
                            break;
                        case '2'://数字
                            $('#{{ id }}'+'_list').addClass('hidden');
                            $('#{{ id }}'+'_player').addClass('hidden');
                            $('#{{ id }}'+'_refresh').addClass('hidden');
                            $('#{{ id }}'+'_number').removeClass('hidden').val('').attr('placeholder', '{{ "Numbers"|trans }}');
                            break;
                        case '3'://数字变量
                            $('#{{ id }}'+'_list').addClass('hidden');
                            $('#{{ id }}'+'_player').addClass('hidden');
                            $('#{{ id }}'+'_refresh').addClass('hidden');
                            $('#{{ id }}'+'_number').removeClass('hidden').val('').attr('placeholder', '{{ "Numbers Variable Name"|trans }}');
                            break;
                    }
                });
                //收听语音
                $('#{{ id }}'+'_list').on('change', function() {
                    var file = $(this).val();
                    if (file) {
                        var url = "{{ path('icsoc_ivr_sound_play', {'file': 'placeholder_file'}) }}";
                        url = url.replace('placeholder_file', file);
                        $('#{{ id }}'+'_player').attr('src', url);
                    } else {
                        $('#{{ id }}'+'_player').removeAttr('src');
                    }
                });
                //刷新语音列表
                $('#{{ id }}'+'_refresh').on('click', function() {
                    $.ajax({
                        url: "{{ path('icsoc_ivr_sound_refresh') }}",
                        dataType: 'json',
                        type: 'post',
                        success: function(response) {
                            var $list = $('#{{ id }}'+'_list');
                            $list.empty().append("<option value=''>{{ 'Please Select Sound'|trans }}</option>");
                            $.each(response, function(index, value) {
                                $list.append("<option value='"+value.id+"' address='"+value.address+"'>"+value.name+"</option>");
                            });
                        }
                    });
                });
                //添加语音
                $('#{{ id }}'+'_add').on('click', function() {
                    var $content = $('<select id="{{ id }}_list"> <option value="">{{ 'Please Select Sound'|trans }}</option>{% for sound in sound_list %} <option value="{{ sound.address }}">{{ sound.name|trans({}, translation_domain) }} </option>{% endfor %} </select><br>');
                    $content.insertBefore($('#{{ id }}'+'_player'));
                });
            </script>
        </div>
    {% else %}
        {{ parent() }}
    {% endif %}
{%- endblock choice_widget %}